﻿<!DOCTYPE html>
<!-- Copyright © Microsoft Corporation. All rights reserved. -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Internet Explorer Developer Sample</title>
    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
    <script type="text/javascript" src="script/base-sdk.js"></script>
</head>
<body role="application">
    <div id="header" role="contentinfo"></div>

    <h1 id="sampleTitle">Form validation</h1>
    <h2>Scenario 1: <a href="scenario1.html">Creating a form</a></h2>
    <p>
        This sample registration form uses various types of input elements and buttons.
    </p>
    <h2>Scenario 2: <a href="scenario2.html">Validating user input</a></h2>
    <p>
        In this example, the user registration form now validates to ensure that the
        data received meets certain requirements.
    </p>
    <h2>Scenario 3: <a href="scenario3.html">Creating a custom error experience</a></h2>
    <p>
        This example shows you how to provide a custom error message using the 'onchange'
        and 'oninvalid' events.
    </p>
    <h2>Scenario 4: <a href="scenario4.html">Using validation selectors</a></h2>
    <p>
        This example shows how to use CSS selectors to set styles for input elements
        based on whether they are valid or invalid, or they are required or optional.
    </p>
    <h2>Scenario 5: <a href="scenario5.html">Submitting via FormData + XHR</a></h2>
    <p>
        This code demonstrates how to submit form contents using XMLHttpRequest (XHR)
        and the FormData object as an alternative to using the HTTP POST request method.
    </p>

    <div class="seeAlsoRegion" role="region" aria-labelledby="seeAlsoLabel" aria-live="assertive">
        <h3 id="seeAlsoLabel">See also</h3>
        <div class="seeAlsoContent">
            <h4>Reference</h4>
            <p>
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772943(v=vs.85).aspx">required attribute</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772941(v=vs.85).aspx">pattern attribute</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh773355(v=vs.85).aspx">patternMismatch property</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/ms536912(v=vs.85).aspx">onchange event</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx">:invalid pseudo-class</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772709(v=vs.85).aspx">:optional pseudo-class</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772720(v=vs.85).aspx">:required pseudo-class</a><br />
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh772723(v=vs.85).aspx">FormData object</a><br />
            </p>
            <h4>Conceptual</h4>
            <p>
                <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx">Internet Explorer 10 Developer Guide: HTML5 Forms</a>
            </p>
            <h4>Internet Explorer Testing Center</h4>
            <p>
                <a target="_blank" href="http://samples.msdn.microsoft.com/ietestcenter/#html5Forms">HTML5 Forms</a>
            </p>
        </div>
    </div>

    <div id="footer" role="contentinfo"></div>
</body>
</html>